<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青云教育系统 - 教员信息及考勤</title>
    <link rel="stylesheet" href="teacher.css">
</head>
<body>
    <div class="layout">
        <aside class="sidebar">
            <div class="brand">青云教育 · 教师端</div>
            <nav class="menu" id="menu">
                <button class="menu-item active" data-view="profile" data-url="/index">教员信息及考勤</button>
                <button class="menu-item" data-view="schedule" data-url="/schedule">教师课表</button>
                <button class="menu-item" data-view="password" data-url="/password">修改密码</button>
                <button class="menu-item" data-view="students" data-url="/students">学生信息</button>
                <button class="menu-item" data-view="upload" data-url="/upload">上传资料</button>
                <button class="menu-item" data-view="download" data-url="/download">下载资料</button>
                <button class="menu-item" data-view="mymaterials" data-url="/mymaterials">我的资料</button>
                
                
            </nav>
        </aside>
        <main class="content">
            <header class="topbar">
                <div class="left">
                    <h1 id="view-title">教员信息及考勤</h1>
                </div>
                <div class="right">
                    <div class="user-info">
                        <img id="user-avatar" class="user-avatar" src="" alt="用户头像">
                        <span id="teacher-name" class="user-name"></span>
                    </div>
                    <button id="logoutBtn" class="btn btn-secondary">退出登录</button>
                </div>
            </header>

            <section id="view-profile" class="view" style="display:block;">
                <div class="card">
                    <div class="card-header">个人信息</div>
                    <div class="card-body">
                        <div class="profile-info">
                            <div class="profile-avatar">
                                <img id="profile-avatar" class="large-avatar" src="" alt="头像">
                            </div>
                            <div class="profile-details">
                                <div class="info-row">
                                    <label>姓名：</label>
                                    <span id="profile-name"></span>
                                </div>
                                <div class="info-row">
                                    <label>教师编号：</label>
                                    <span id="profile-account"></span>
                                </div>
                                <div class="info-row">
                                    <label>权限等级：</label>
                                    <span id="profile-permission"></span>
                                </div>
                                <div class="info-row">
                                    <label>入职时间：</label>
                                    <span id="profile-create-time"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">考勤统计</div>
                    <div class="card-body">
                        <div class="attendance-stats">
                            <div class="stat-item">
                                <div class="stat-number" id="total-days">0</div>
                                <div class="stat-label">本月工作日</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="normal-days">0</div>
                                <div class="stat-label">正常出勤</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="late-days">0</div>
                                <div class="stat-label">迟到次数</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="absent-days">0</div>
                                <div class="stat-label">缺勤次数</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">考勤记录</div>
                    <div class="card-body">
                        <div class="attendance-filters">
                            <label>
                                月份：
                                <input type="month" id="attendanceMonth" value="">
                            </label>
                            <button id="refreshAttendance" class="btn btn-primary">刷新考勤</button>
                        </div>
                        <div class="attendance-table-wrapper">
                            <table class="attendance-table">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>星期</th>
                                        <th>签到时间</th>
                                        <th>签退时间</th>
                                        <th>工作时长</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody id="attendanceBody">
                                </tbody>
                            </table>
                            <div id="attendanceEmpty" class="empty" style="display:none;">暂无考勤记录</div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="index.js"></script>
    <script>
        // 页面加载时验证登录状态
        document.addEventListener('DOMContentLoaded', function() {
            const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
            
            // 检查用户是否已登录
            if (!userInfo || !userInfo.token || !userInfo.userDTO || 
                typeof userInfo.token !== 'string' || userInfo.token.trim() === '') {
                console.log('用户未登录，跳转到登录页');
                localStorage.removeItem('userInfo');
                localStorage.removeItem('userToken');
                window.location.href = 'login.html';
                return;
            }
            
            // 验证token格式
            if (userInfo.token.length < 10) {
                console.log('Token格式无效，跳转到登录页');
                localStorage.removeItem('userInfo');
                localStorage.removeItem('userToken');
                window.location.href = 'login.html';
                return;
            }
            
            console.log('用户已登录，页面正常加载');
        });
    </script>
</body>
</html>
